<template>
    <div class="right-list-container">
        <li v-for="(item, i) in props.list" :key="i">
            <span
                @click="handleClick(item)"
                :class="{ active: item.isSelected }"
            >
                {{ item.name }}
            </span>
            <span
                v-if="item.aside"
                @click="handleClick(item)"
                class="aside"
                :class="{ active: item.isSelected }"
            >
                {{ item.aside }}
            </span>
            <RightList
                v-if="item.children"
                :list="item.children"
                @select="handleClick"
            />
        </li>
    </div>
</template>
<script setup lang="ts">
import { PropType } from "vue";
import { RightListItemInter } from "./types";
//#region defineXxx
defineOptions({
    name: "RightList",
});

const props = defineProps({
    propB: {
        type: Number,
        default: 1,
    },
    list: {
        type: Array as PropType<RightListItemInter[]>,
        default: () => [],
    },
});

const emit = defineEmits<{
    select: [item: RightListItemInter];
}>();
//#endregion
const handleClick = (item: RightListItemInter) => {
    emit("select", item);
};
</script>
<style lang="less" scoped>
.right-list-container {
    list-style: none;
    padding: 0;
    .right-list-container {
        margin-left: 1em;
    }
    li {
        min-height: 40px;
        line-height: 40px;
        font-size: 14px;
        cursor: pointer;
        .active {
            color: @warn;
            font-weight: bold;
        }
        .aside {
            font-size: 12px;
            margin-left: 1em;
            color: @gray;
        }
    }
}
</style>
